<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 新建 -->
      <div class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">接引状态管理</div>
            <div class="you"></div>
          </div>
        </div>
        <div class="header-content">
          <div class="form_div">
            <div>
              <el-date-picker
                value-format="yyyy-MM-dd hh:mm:ss"
                v-model="form.setTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
          </div>
          <div>
            <el-button
              size="small"
              @click="searchInfo()"
              type="primary"
              style="margin-left: 5px"
              class="bg_button"
              >搜 索</el-button
            >
            <el-button
              size="small"
              @click="resettingInfo()"
              type="primary"
              style="margin-left: 5px"
              class="bg_button"
              >重置</el-button
            >
          </div>
          <div class="btnzu">
            <div class="footer_left">
              <div>
                <el-button class="bg_add" @click="bg_add()" type="primary" plain
                  >前一天</el-button
                >
              </div>
              <div>
                <el-button class="bg_dao" @click="bg_dao()" type="warning" plain
                  >后一天</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-el-row-content">
        <div class="image-viewer">
          <img :src="image" />

          <!-- <viewer
            :options="options"
            :images="images"
            @inited="inited"
            rebuild
            class="viewer"
            ref="viewer"
          >
            <template #default="scope">
              <img v-for="src in scope.images" :src="src" :key="src" />
            </template>
          </viewer> -->
        </div>
      </div>
      <!-- <button type="button" @click="show">Show</button> -->
    </div>
  </div>
</template>
<script>
import { post } from "../../../utils/request";

export default {
  comments() {
    // Viewer
  },
  data() {
    return {
      data_type: "",
      options: {
        toolbar: true,
      },
      index: 0,
      images: [
        // "http://192.168.10.146:18080/api/idatamanage/samba/2017/0903/234/20170903_000753_1024_0193.jpg",
        // "http://192.168.10.146:18080/api/idatamanage/samba/2017/0903/234/20170903_002329_1024_0193.jpg",
      ],
      image: "",
      form: {
        setTime: "",
      },
    };
  },
  mounted() {
    this.init();
    // this.broadcast();
  },
  watch: {
    // 如果路由发生变化，再次执行该方法
    $route(to, from) {
      console.log(to);
      console.log(from);
      this.init();
    },
  },
  methods: {
    init() {
      this.data_type = this.$route.query.key;
      var params = null;
      if (!this.form.setTime) {
        params = {
          type: this.data_type,
        };
      } else {
        params = {
          type: this.data_type,
          bgnDt: this.form.setTime,
        };
      }
      post("/api/idatamanage/dataService/querySolarImage", params).then(
        (res) => {
          if (res.data.data) {
            console.log("数据1", res.data.data);
            // this.showData = res.data.data.dataList;
            // this.total = res.data.data.total;
            this.images = res.data.data;
            res.data.data.forEach((item) => {
              this.images.push(
                "http://192.168.10.146:18080/api/idatamanage/samba" + item.path
              );
            });
          }

          this.broadcast();
        }
      );
    },
    // inited (viewer) {
    //     this.$viewer = viewer
    // },
    // show () {
    //     this.$viewer.show()
    // }
    inited(viewer) {
      this.$viewer = viewer;
      this.$viewer.view(this.index);
    },
    view(index) {
      this.index = index;
      this.$viewer.view(this.index);
    },
    show(images, index = 0) {
      if (this.images === images) {
        this.view(index);
        return;
      }
      this.images = images;
      this.index = index;
    },
    ComplementZero(res) {
      if (res < 10) {
        return "0" + res;
      } else {
        return res;
      }
    },
    searchInfo() {
      this.loading = true;
      console.log(this.form.setTime);
      if (this.form.setTime) {
        this.init();
      } else {
        const date = new Date().getTime();
        const bgnDate = new Date(date), // 结束时间
          bgnY = bgnDate.getFullYear() + "-",
          bgnM = this.ComplementZero(bgnDate.getMonth() + 1) + "-",
          bgnD = this.ComplementZero(bgnDate.getDate()) + " ",
          bgnh = this.ComplementZero(bgnDate.getHours()) + ":",
          bgnm = this.ComplementZero(bgnDate.getMinutes()) + ":",
          bgns = this.ComplementZero(bgnDate.getSeconds());
        const bgnTime = bgnY + bgnM + bgnD + bgnh + bgnm + bgns;

        // const halfYear = (365 / 2) * 24 * 3600 * 1000;
        // const pastResult = date - halfYear;
        // const pastDate = new Date(pastResult), // 开始时间
        //   endY = pastDate.getFullYear() + "-",
        //   endM = this.ComplementZero(pastDate.getMonth() + 1) + "-",
        //   endD = this.ComplementZero(pastDate.getDate()) + " ",
        //   endh = this.ComplementZero(pastDate.getHours()) + ":", //获取当前小时数(0-23)
        //   endm = this.ComplementZero(pastDate.getMinutes()) + ":", //获取当前分钟数(0-59)
        //   ends = this.ComplementZero(pastDate.getSeconds()); //获取当前秒数(0-59)
        // const endTime = endY + endM + endD + endh + endm + ends; // 默认获取一年前 到现在的数据
        // this.form.setTime = endTime;
        this.form.setTime = bgnTime;
        this.init();
      }
    },
    bg_add() {
      console.log(this.form.setTime);
      if (!this.form.setTime) {
        const date = new Date().getTime();
        const bgnDate = new Date(date),
          bgnY = bgnDate.getFullYear() + "-",
          bgnM = this.ComplementZero(bgnDate.getMonth() + 1) + "-",
          bgnD = this.ComplementZero(bgnDate.getDate()) + " ",
          bgnh = this.ComplementZero(bgnDate.getHours()) + ":",
          bgnm = this.ComplementZero(bgnDate.getMinutes()) + ":",
          bgns = this.ComplementZero(bgnDate.getSeconds());
        const bgnTime = bgnY + bgnM + bgnD + bgnh + bgnm + bgns;
        this.form.setTime = bgnTime;
      } else {
        const halfYear = 1 * 24 * 3600 * 1000;
        const bgnDate = new Date(this.form.setTime);
        const pastResult = bgnDate - halfYear;
        const pastDate = new Date(pastResult),
          endY = pastDate.getFullYear() + "-",
          endM = this.ComplementZero(pastDate.getMonth() + 1) + "-",
          endD = this.ComplementZero(pastDate.getDate()) + " ",
          endh = this.ComplementZero(pastDate.getHours()) + ":", //获取当前小时数(0-23)
          endm = this.ComplementZero(pastDate.getMinutes()) + ":", //获取当前分钟数(0-59)
          ends = this.ComplementZero(pastDate.getSeconds()); //获取当前秒数(0-59)
        const bgnTime = endY + endM + endD + endh + endm + ends;
        this.form.setTime = bgnTime;
      }
    },
    bg_dao() {
      if (!this.form.setTime) {
        const date = new Date().getTime();
        const bgnDate = new Date(date),
          bgnY = bgnDate.getFullYear() + "-",
          bgnM = this.ComplementZero(bgnDate.getMonth() + 1) + "-",
          bgnD = this.ComplementZero(bgnDate.getDate()) + " ",
          bgnh = this.ComplementZero(bgnDate.getHours()) + ":",
          bgnm = this.ComplementZero(bgnDate.getMinutes()) + ":",
          bgns = this.ComplementZero(bgnDate.getSeconds());
        const bgnTime = bgnY + bgnM + bgnD + bgnh + bgnm + bgns;
        this.form.setTime = bgnTime;
      } else {
        const halfYear = 1 * 24 * 3600 * 1000;
        console.log(this.form.setTime);
        const bgnDate = new Date(this.form.setTime);
        const pastResult = bgnDate - 0 + halfYear;
        console.log(bgnDate, pastResult);
        const pastDate = new Date(pastResult), // 开始时间
          endY = pastDate.getFullYear() + "-",
          endM = this.ComplementZero(pastDate.getMonth() + 1) + "-",
          endD = this.ComplementZero(pastDate.getDate()) + " ",
          endh = this.ComplementZero(pastDate.getHours()) + ":", //获取当前小时数(0-23)
          endm = this.ComplementZero(pastDate.getMinutes()) + ":", //获取当前分钟数(0-59)
          ends = this.ComplementZero(pastDate.getSeconds()); //获取当前秒数(0-59)
        const bgnTime = endY + endM + endD + endh + endm + ends;
        console.log(bgnTime);
        this.form.setTime = bgnTime;
      }
    },
    resettingInfo() {
      this.loading = true;
      this.form.setTime = "";
      this.form.endTime = "";
      this.init();
    },
    broadcast() {
      //   this.image = this.images[0].path;
      //   let time = null;
      //   let bgnDate = null;
      //   let bgnY = null;
      //   let bgnM = null;
      //   let bgnD = null;
      //   let bgnh = null;
      //   let bgnm = null;
      //   let bgns = null;
      //   let bgnTime = null;
      //   let pastDate = null;
      //   let pastTime = null;
      //   let endTime = null;
      //   let i = 0;
      //   setInterval(() => {
      // time = new Date().getTime();
      // (bgnDate = new Date(time)),
      //   (pastDate = new Date(this.images[0].dayHhmmss));
      // endTime = bgnDate - pastDate;
      // (pastTime = new Date(endTime)),
      //   (bgnY = pastTime.getFullYear() + "-"),
      //   (bgnM = this.ComplementZero(pastTime.getMonth() + 1) + "-"),
      //   (bgnD = this.ComplementZero(pastTime.getDate()) + " "),
      //   (bgnh = this.ComplementZero(pastTime.getHours()) + ":"),
      //   (bgnm = this.ComplementZero(pastTime.getMinutes()) + ":"),
      //   (bgns = this.ComplementZero(pastTime.getSeconds()));
      // bgnTime = bgnY + bgnM + bgnD + bgnh + bgnm + bgns;
      // console.log(pastTime);
      // this.images.forEach((event) => {
      //   if (event.dayHhmmss == bgnTime) {
      //     this.image = event.path;
      //   }
      // });
      // console.log(this.images[i]);
      // this.image = this.images[i].path;
      // i++;
      //   }, 1000);
    },
  },
};
</script>
<style src="../../../assets/css/common.css"></style>
<style lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;
}
::v-deep .el-input__icon {
  line-height: 32px !important;
}
.btnzu {
  display: flex;
  width: 180px;
  margin: 0 0 0 30px;

  .footer_left {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    div {
      width: 100px;
      .bg_add {
        padding: 9px 15px;
        background: rgb(4, 119, 166);
        color: #fff;
        border: none;
      }
      .bg_add:hover {
        color: rgb(132, 242, 255);
      }
      .bg_dao {
        padding: 9px 15px;
        background: rgb(4, 119, 166);
        color: #fff;
        border: none;
      }
      .bg_dao:hover {
        color: #e6a23c;
      }
    }
  }
}
.image-viewer {
  height: 500px;
  position: relative;
  img {
    height: 500px;
    position: absolute;
  }
}
</style>
<!-- <style>
.viewer-loading > img {
  display: none;  /* hide big images when it is loading */
}
</style> -->